import React, { useState, useEffect } from 'react'
import styles from './details.less'
import favorites from '../../assets/icon/favorites.png'
import hFavorites from '../../assets/icon/hFavorites.png'
import defaultImg from '../../assets/news/defaultListIcon.png'
import { E } from '../../../../constants'
import moment from 'moment'
import { useParams, useSelector, useDispatch } from 'dva'
function Details() {
  const { id } = useParams()
  const dispatch = useDispatch()
  const [isLike, setIsLike] = useState(false)
  const {
    newsDetail,
    userInfo,
  } = useSelector(({ index }) => index)
  useEffect(() => {
    // console.log(userInfo, 'userInfo')
    dispatch({
      type: 'index/apiGetNewsDetail',
      payload: {
        id,
        userId:  userInfo?.user?.id
      }
    })
  }, [])

  useEffect(() => {
    dispatch({
      type: 'index/apiGetNewsDetail',
      payload: {
        id,
        userId:  userInfo?.user?.id
      }
    })
  }, [userInfo])


  function updateLike(id) {
    // console.log(id, 'iiiiiiiiiiiiii')
    dispatch({
      type: 'index/apiPostLikeNews',
      payload: {
        objectId: id,
        objectType: 'ARTICLE',
        type: 'COLLECTED',
        userId: userInfo?.user?.id
      },
      callback: () => {
        dispatch({
          type: 'index/apiGetNewsDetail',
          payload: {
            id,
            userId:  userInfo?.user?.id
          }
        })
      }
    })
  }

  let htmlReg = new RegExp('/uploads', "g")

  // console.log(newsDetail, 'newsDetail')

  return (
    <div className={styles.page}>
      <div className={styles.imgBox}>
        <img src={newsDetail?.pictures || defaultImg}></img>
      </div>

      <div className={styles.newsBox}>
        <div className={styles.info}>
          <span className={styles.title} style={{ WebkitBoxOrient: "vertical", MozBoxOrient: 'vertical' }}>{newsDetail && newsDetail.title && newsDetail.title}</span>
          <div className={styles.date}>
            <span>{newsDetail && newsDetail.createTime && moment(newsDetail.createTime).format('YYYY-MM-DD')}</span>
            <img
              src={newsDetail && newsDetail.ifCollect ? hFavorites : favorites}
              alt="isHot"
              onClick={(e) => {
                e.stopPropagation()
                updateLike(newsDetail.id)
              }}
            ></img>
          </div>
        </div>
        <div className={styles.copywriting}>
          {/* {
            obj && obj.text.map((item, index) => {
              return <p className={styles.text} key={index}>
                {item}
              </p>
            })
          } */}
          <div dangerouslySetInnerHTML={{ __html: newsDetail && newsDetail.linkContent.replace(htmlReg, E.attchmentPrefix + '/uploads') || '' }} />


        </div>

      </div>
    </div>
  )
}

export default Details
